<!--
 * @Author: Liz.Zheng
 * @Date: 2021-12-31 10:35:50
 * @LastEditTime: 2023-02-16 10:11:21
 * @LastEditors: 郑亚莉 zhengyali@shequ.life
 * @Description: 合同账单
 * @Motto: Write the code. Change the world.
-->
<template>
  <section class="contract-bill">
    <section class="statistic">
      <a-row :gutter="24">
        <a-col :xs="12" :xxl="6" :sm="6" :md="6" :lg="6" :xl="6">
          <a-statistic
            title="收款账单总金额"
            :value="statisticsData.collectBillTotal"
          >
          </a-statistic>
        </a-col>
        <a-col :xs="12" :xxl="6" :sm="6" :md="6" :lg="6" :xl="6">
          <a-statistic
            title="收款账单总实收"
            :value="statisticsData.collectBillActualTotal"
          >
          </a-statistic>
        </a-col>
        <a-col :xs="12" :xxl="6" :sm="6" :md="6" :lg="6" :xl="6">
          <a-statistic
            title="付款账单总金额"
            :value="statisticsData.payBillTotal"
          >
          </a-statistic>
        </a-col>
        <a-col :xs="12" :xxl="6" :sm="6" :md="6" :lg="6" :xl="6">
          <a-statistic
            title="付款账单总实付"
            :value="statisticsData.payBillActualTotal"
          >
          </a-statistic>
        </a-col>
      </a-row>
    </section>

    <!-- 非押金 -->

    <section class="mt-10 bg-white">
      <a-table
        :dataSource="dataList"
        :columns="columns.columns_1"
        :loading="loading"
        :pagination="pagination_1"
        rowKey="id"
        @change="(pager) => handleTableChange(1, pager)"
        :scroll="{ x: 'max-content' }"
        :customRow="customRow"
      >
        <template #title>
          <a-row align="middle">
            <span class="ml-10">非押金类</span>
            <a-radio-group
              v-model:value="billType"
              button-style="solid"
              style="margin-left: 20px; margin-right: 20px"
              @change="onBillTypeChange"
            >
              <a-radio-button value="1">收入账单</a-radio-button>
              <a-radio-button value="2">支出账单</a-radio-button>
            </a-radio-group>
            <a-range-picker
              v-model:value="billTime"
              :ranges="{
                今天: [moment(), moment()],
                本周: [moment().startOf('week'), moment().endOf('week')],
                本月: [moment().startOf('month'), moment().endOf('month')],
                本年: [moment().startOf('year'), moment().endOf('year')],
              }"
              valueFormat="YYYY-MM-DD"
              @change="onBillTimeChange"
              :placeholder="[' 应收/付开始时间', '应收/付结束时间']"
              style="width: 300px"
            />
          </a-row>
        </template>
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.key === 'price'">
            <div v-if="record.bill_type == 1" class="mb-5">
              <a-tag color="green">收</a-tag>
              <div>{{ text }}</div>
            </div>
            <div v-if="record.bill_type == 2" class="mb-5">
              <a-tag color="red">付</a-tag>
              <div>{{ text }}</div>
            </div>
          </template>
        </template>
      </a-table>
    </section>

    <!-- 押金 -->
    <section class="mt-20 bg-white">
      <a-table
        :dataSource="bondDataList"
        :columns="columns.columns_2"
        :pagination="pagination_2"
        rowKey="id"
        @change="(pager) => handleTableChange(2, pager)"
        :scroll="{ x: 'max-content' }"
        :customRow="customRow"
      >
        <template #title>
          <a-row align="middle">
            <span class="ml-10">押金类</span>
            <a-radio-group
              v-model:value="bondBillType"
              button-style="solid"
              style="margin-left: 20px; margin-right: 20px"
              @change="onBondBillTypeChange"
            >
              <a-radio-button value="1">收入账单</a-radio-button>
              <a-radio-button value="2">支出账单</a-radio-button>
            </a-radio-group>
            <a-range-picker
              v-model:value="bondBillTime"
              :ranges="{
                今天: [moment(), moment()],
                本周: [moment().startOf('week'), moment().endOf('week')],
                本月: [moment().startOf('month'), moment().endOf('month')],
                本年: [moment().startOf('year'), moment().endOf('year')],
              }"
              valueFormat="YYYY-MM-DD"
              @change="onBondBillTimeChange"
              :placeholder="[' 应收/付开始时间', '应收/付结束时间']"
              style="width: 300px"
            />
          </a-row>
        </template>
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.key === 'billType'">
            <a-tag style="text-align: center" color="green">{{ text }}</a-tag>
          </template>
        </template>
      </a-table>
    </section>

    <!-- 账单详情 -->
    <BillDetailDrawer
      :visible="billDetailVisible"
      :id="billDetailId"
      @cancel="
        () => {
          billDetailVisible = false;
        }
      "
    />
  </section>
</template>

<script>
import {
  defineComponent,
  ref,
  watch,
  computed,
  reactive,
  defineAsyncComponent,
} from "vue";
import request from "../../../common/utils/request";
import store from "../../../store";
import { useRoute, useRouter } from "vue-router";
import moment from "moment";
const BillDetailDrawer = defineAsyncComponent(() =>
  import("@/views/bill/BillDetail/modules/BillDetailDrawer.vue")
);

export default defineComponent({
  name: "ContractDetailBill",
  components: { BillDetailDrawer },
  props: {
    active: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const $route = useRoute();
    const $router = useRouter();
    // 账单详情
    const billDetailVisible = ref(false);
    const billDetailId = ref(0);
    const page = reactive({
      page_1: 1,
      page_2: 1,
    });
    const limit = reactive({
      limit_1: 10,
      limit_2: 10,
    });
    const total = reactive({
      total_1: 0,
      total_2: 0,
    });
    const pagination_1 = computed(() => ({
      total: total.total_1,
      current: page.page_1,
      pageSize: limit.limit_1,
      showSizeChanger: true,
    }));
    const pagination_2 = computed(() => ({
      total: total.total_2,
      current: page.page_2,
      pageSize: limit.limit_2,
      showSizeChanger: true,
    }));
    const loading = ref(false);
    const handleTableChange = (type, pager) => {
      if (type == 1) {
        page.page_1 = pager.current;
        limit.limit_1 = pager.pageSize;
        getBillInfo();
        return;
      }
      if (type == 2) {
        page.page_2 = pager.current;
        limit.limit_2 = pager.pageSize;
        getBondBillInfo();
        return;
      }
    };
    const dataList = ref([]);
    const statisticsData = ref({});
    const billType = ref("1");
    const billTime = ref([]);
    const getBillInfo = () => {
      loading.value = false;
      let params = {
        page: page.page_1,
        limit: limit.limit_1,
        contract_id: store.getters.contractDetail.id,
        bill_type: billType.value,
      };
      if (billTime.value.length > 0 && billTime.value[0] && billTime.value[1]) {
        params.receivable_start = billTime.value[0];
        params.receivable_end = billTime.value[1];
      }
      request
        .get("/org", "/contract/billList", params)
        .then((res) => {
          loaded = true;
          const { billData, statistics } = res;
          dataList.value = billData.list;
          total.total_1 = billData.total;
          statisticsData.value = statistics;
        })
        .finally(() => {
          loading.value = false;
        });
    };

    const bondDataList = ref([]);
    const bondBillType = ref("1");
    const bondBillTime = ref([]);
    const getBondBillInfo = () => {
      let params = {
        page: page.page_2,
        limit: limit.limit_2,
        contract_id: store.getters.contractDetail.id,
        bill_type: bondBillType.value,
      };
      if (
        bondBillTime.value.length > 0 &&
        bondBillTime.value[0] &&
        bondBillTime.value[1]
      ) {
        params.receivable_start = bondBillTime.value[0];
        params.receivable_end = bondBillTime.value[1];
      }
      request.get("/org", "/contract/bondBillList", params).then((res) => {
        loaded = true;
        bondDataList.value = res.list;
        total.total_2 = res.total;
      });
    };

    const init = () => {
      getBillInfo();
      getBondBillInfo();
    };

    let loaded = false;
    watch(
      () => props.active,
      (val) => {
        if (val) {
          init();
        }
      }
    );

    // 自定义行
    const customRow = (record) => {
      return {
        style: {
          cursor: "pointer",
        },
        onClick: (e) => handleTableRowClick(record),
      };
    };
    // 点击行
    const handleTableRowClick = (record) => {
      if (record.id) {
        billDetailId.value = record.id;
        billDetailVisible.value = true;
      }
    };

    const onBillTypeChange = (e) => {
      billType.value = e.target.value;
      getBillInfo();
    };

    const onBondBillTypeChange = (e) => {
      bondBillType.value = e.target.value;
      getBondBillInfo();
    };

    const onBillTimeChange = (dates, dateStrings) => {
      billTime.value = dateStrings;
      getBillInfo();
    };

    const onBondBillTimeChange = (dates, dateStrings) => {
      bondBillTime.value = dateStrings;
      getBondBillInfo();
    };

    return {
      columns,
      pagination_1,
      pagination_2,
      dataList,
      bondDataList,
      loading,
      statisticsData,
      handleTableChange,
      customRow,
      moment,
      billType,
      billTime,
      bondBillType,
      bondBillTime,
      onBillTypeChange,
      onBondBillTypeChange,
      onBillTimeChange,
      onBondBillTimeChange,
      billDetailVisible,
      billDetailId,
    };
  },
});
const columns = {
  columns_1: [
    {
      title: "费用类型",
      dataIndex: "costType",
      width: 120,
    },
    {
      title: "账单金额",
      dataIndex: "billAmount",
      width: 120,
    },
    {
      title: "账单状态",
      dataIndex: "settleStatus",
      width: 120,
    },
    {
      title: "应收/付金额",
      dataIndex: "receivablePayment",
      key: "price",
      width: 120,
    },
    {
      title: "实收/付金额",
      dataIndex: "actualPayment",
      key: "price",
      width: 120,
    },
    {
      title: "需收/付金额",
      dataIndex: "actualRetreat",
      key: "price",
      width: 120,
    },
    {
      title: "币种（单位）",
      dataIndex: "currency",
      width: 120,
    },
    {
      title: "逾期状态",
      dataIndex: "timeoutStatus",
      width: 120,
    },
    {
      title: "开始时间",
      dataIndex: "startDate",
      width: 120,
    },
    {
      title: "结束时间",
      dataIndex: "endDate",
      width: 120,
    },
    {
      title: "应收/付时间",
      dataIndex: "receivablePaymentDate",
      width: 120,
    },
    {
      title: "调整金额",
      dataIndex: "adjustAmount",
      width: 120,
    },
    {
      title: "转出金额",
      dataIndex: "outAmount",
      width: 120,
    },
    {
      title: "转入金额",
      dataIndex: "intoAmount",
      width: 120,
    },
  ],
  columns_2: [
    {
      title: "费用类型",
      dataIndex: "costType",
      width: 120,
    },
    {
      title: "账单类型",
      dataIndex: "billType",
      key: "billType",
      width: 120,
    },
    {
      title: "账单金额",
      dataIndex: "billAmount",
      width: 120,
    },
    {
      title: "账单状态",
      dataIndex: "settleStatus",
      width: 120,
    },
    {
      title: "应收/付金额",
      dataIndex: "receivablePayment",
      key: "price",
      width: 120,
    },
    {
      title: "实收/付金额",
      dataIndex: "actualPayment",
      key: "price",
      width: 120,
    },
    {
      title: "需收/付金额",
      dataIndex: "actualRetreat",
      key: "price",
      width: 120,
    },
    {
      title: "币种（单位）",
      dataIndex: "currency",
      width: 120,
    },
    {
      title: "逾期状态",
      dataIndex: "timeoutStatus",
      width: 120,
    },
    {
      title: "应收/付时间",
      dataIndex: "receivablePaymentDate",
      width: 120,
    },
    {
      title: "转入金额",
      dataIndex: "intoAmount",
      width: 120,
    },
    {
      title: "转出金额",
      dataIndex: "outAmount",
      width: 120,
    },
  ],
};
</script>

<style lang="less" scoped>
.statistic {
  background: #fff;
  padding: 10px;
}
</style>
